<template>
  <div id="backnav">
    <el-row class="tac">
      <el-col :span="24">
        <br><h3  style="color:#FBF2ED">后台管理</h3><br>
        <el-menu router :default-active="defaultActive" class="el-menu-vertical-demo" background-color="transparent" @select="handleSelect">
          <el-menu-item index="/foods">
            <i class="el-icon-menu"></i>
            <span slot="title">菜品管理</span>
          </el-menu-item>
          <el-menu-item index="/operate">
            <i class="el-icon-menu"></i>
            <span slot="title">运营管理</span>
          </el-menu-item>
          <el-menu-item index="/inventory">
            <i class="el-icon-document"></i>
            <span slot="title">库存管理</span>
          </el-menu-item>
          <el-menu-item index="/info">
            <i class="el-icon-setting"></i>
            <span slot="title">基础信息</span>
          </el-menu-item>
          <el-menu-item index="/system">
            <i class="el-icon-menu"></i>
            <span slot="title">系统设置</span>
          </el-menu-item>
          <el-menu-item :index="cwList">
            <i class="el-icon-menu"></i>
            <span slot="title">财务分析</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Backnav',
  data() {
    return {
      cwList:'/finance',
      defaultActive: this.$route.path
    }
  },
  methods:{
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
  },
  // computed:{
  //   changePath:function(){
  //     return this.$route.path
  //   }
  // },
  watch:{
    '$route.path':function(newval,oldval){
       if(newval=='/finance') this.cwList='/finance'
       if(newval=='/cost') this.cwList='/cost'
       if(newval=='/profit') this.cwList='/profit'
       if(newval=='/salary') this.cwList='/salary'
    },
    $route(newRouter) {
      console.log('后台路由改变',newRouter)
      // if (newRouter.matched[1].path==='/finance') this.cwList='/finance'
      this.cwList = '/finance'
      this.defaultActive = newRouter.matched[1].path
      console.log('当前选中的导航',this.defaultActive)
      // this.cwList = newRouter.matched[1].path
    }
  },
}

</script>
<style scoped>
/*h3{
  color: #F4EEEC;
}*/
</style>


